<template>
	<div>
		<el-form
			ref="crmForm"
			:model="formData"
			label-width="135px"
			:rules="CrmRules"
			label-position="top">
			<el-col
				v-for="(item,index) in FieldList"
				:key="index"
				:span="(item.form_type == 'textarea' || item.form_type == 'file') ? 22 : 11">
				<el-form-item
					:label="item.name" 
					:prop="item.field">
					<!-- 选项框 -->
					<table-form-item :item="item" :form-data="formData" :crm-type="crmType"/>	
				</el-form-item>
			</el-col>
		</el-form>
	</div>
</template>

<script>
	import { XhUserCell } from '@/components/user'
	import { mapGetters } from 'vuex'
	import TableFormItem from '@/components/FromData/TableFormItem'
	export default {
		computed: {
			...mapGetters(['userInfo'])
		},
		components: {
			TableFormItem
		},
		props:{
			FieldList:{
				type:[Object,Array],
				default:()=>{
					return {}
				}
			},
			CrmRules:{
				type:Object,
				default:()=>{}
			},
			formData:{
				type:Object,
				default:()=>{}
			},
			crmType:{
				type:String,
				default:''
			},
			action:{
				type:String,
				default:''
			},
		},
		data(){
			return{
				userArr:{
					user_owner_user_id:[]
				},
				// 关联信息
				relationInfo:{
					default_value:"",
					form_type:this.crmType,
					name:"",
					types:"",
					value:[],
					disabled:false
				},
			}
		},
		watch: {
			crmType: function(value) {
				if(this.formData['dialog_'+value]){
					this.relationInfo.value = this.formData['dialog_'+value]
				}else{
					this.relationInfo.value = []
				}
			},
			
			FieldList: function(value) {},
		},
		mounted() {
			if(this.formData['dialog_'+this.crmType]){
				this.relationInfo.value = this.formData['dialog_'+this.crmType]
			}
		},
		methods:{
			validateForm() {
				let flag = false
				this.$refs['crmForm'].validate((valid) => {
					if(!valid){
						flag = false
					}else{
						flag = true
					}
				})
				let formData = this.formData
				return {
					flag:flag,
					data:formData
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.forminput{
		width: 200px;
	}
	/deep/ .el-form-item__content{
		display: inline-block;
		line-height: 40px;
		width: 200px;
	}
	/deep/ .el-input__inner {
	    height: 40px;
	    line-height: 40px;
	    outline: none;
	    padding: 0 15px;
	}
	/deep/ .el-form--label-top .el-form-item__label {
		padding:0 10px 0 0;
	}
	/deep/ .el-form-item {
	    margin-bottom: 23px !important;
		position: relative;
	}
	/deep/ .el-form-item__label {
	    text-align: left !important;
	    vertical-align: middle !important;
	    float: left;
	    font-size: 14px;
	    color: #606266;
	    line-height: 40px !important;
	    padding: 0 12px 0 0;
	    box-sizing: border-box;
		width: 95px !important;
	}
	/deep/ .el-form-item__content {
		width: auto !important;
	}
	/deep/ .el-textarea__inner{
		height: auto !important;
		line-height: 40px !important;
		padding: 0 15px !important;
	}
	
	.el-col-11 {
	    /* height: 100px; */
	}
	
	.datecss /deep/ .el-input__inner {
	    padding: 0 15px 0 25px !important;
	}
	.card-base{
		border-left: 5px solid #3A8EE6;
		height: 15px;
		padding-left: 10px;
		margin:0 0 20px 0
	}
</style>
